<template>
	<view class="wap">
		<view class="fpmw-store">
			<view class="container head-region">
				<view class="body">
					<view class="head-item border-bottom info-item">
						<view class="item-left">
							<image class="head-img"
								:src="info.image">
							</image>
						</view>
						<view class="item-right">
							<view class="item">
								<view class="title">{{info.name}}</view>
							</view>
							<view class="item">
								<view>还剩<text class="stock-text">
										{{info.activity[activity_index].stock||0}}
									</text>份</view>
								<view class="progress">
									<progress :percent="info.activity[activity_index].percent" activeColor="rgb(255, 150, 42)" stroke-width="8"
										border-radius="16" backgroundColor="rgba(255, 150, 42, 0.5)">
									</progress>
								</view>
							</view>
							<view class="item">
								<view class="distance-text">{{distance?'距离：'+distance:''}}</view>
								<view class="time-region">可报名 {{info.open_start||''}}-{{info.open_end||''}}</view>
							</view>
						</view>
					</view>
					<view class="head-item border-bottom cashback-item" style="margin-left: 85px;">
						<view class="text">非会员满<text class="amount">
							{{info.activity[activity_index].pay_fee||'0.00'}}
							</text>奖:<text class="amount">
								{{info.activity[activity_index].cash_back||'0.00'}}
							</text>
						</view>
						<view class="text">会员满<text class="amount">
								{{info.activity[activity_index].vip_pay_fee||'0.00'}}
							</text>奖:<text class="amount">
								{{info.activity[activity_index].vip_cash_back||'0.00'}}
							</text>
						</view>
						<view>
							<image src="@/static/img/mt-logo-ico.png" class="icon" v-if="platform=='meituan'">
							</image>
							<image src="@/static/img/elm-logo-ico.png" class="icon" v-if="platform=='eleme'">
							</image>
						</view>
					</view>
					<view class="head-item border-bottom address-item">
						<image src="@/static/img/address-gray-ico.png" class="icon">
						</image>
						<view class="address-text">{{info.address||''}}
						</view>
					</view>
					
					<view @click="copy(info.name)" class="head-item footer-item">
						<view>点击复制店名</view>
					</view>
			<!-- 		<view @click="gotoWaiMai" class="head-item footer-item" v-if="platform=='meituan'">
						<view>查看是否可配送</view>
						<image src="@/static/img/redjt.png" style="width: 30rpx;height: 30rpx;"></image>
					</view> -->
				<!-- 	<view @click="gotoWaiMai" class="head-item footer-item" v-if="platform=='eleme'">
						<view>点击复制，饿了么搜索店名</view>
						<image src="@/static/img/redjt.png" style="width: 30rpx;height: 30rpx;"></image>
					</view> -->
				</view>
			</view>
			
			<view class="activity-container">
				<view class="activity-list meituan" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]"  >
					<view @click="changeActivity(index)" class="item" :class="[ activity_index === index ? 'active':'' ]" v-for="(item,index) in info.activity" :key="index">
						<text v-if="item.stock>0">活动{{index+1}}</text>
						<text v-else style="color: #D2D2D2">已抢光</text>
					</view>
				</view>
			</view>
			
			<view class="container rules-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">品鉴规则</view>
				</view>
				<view class="body">
					<view class="item">
						<view class="left" :class="[platform=='meituan'?'meituan':'elem']">1</view>
						<view class="right">{{info.activity[activity_index].rule||'--'}}</view>
					</view>
					<!-- <view class="item"> -->
						<!-- <view class="left" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">2</view> -->
						<!-- <view class="right">会员满<text class="amount"
								:class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">{{info.activity[activity_index].vip_pay_fee||'0.00'}}</text>得:<text class="amount"
								:class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">{{info.activity[activity_index].vip_cash_back||'0.00'}}</text>,
							非会员满<text class="amount" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">{{info.activity[activity_index].pay_fee||'0.00'}}</text>得:
							<text class="amount" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">{{info.activity[activity_index].cash_back||'0.00'}}</text>
						</view> -->
						
						<!-- <view class="right"> -->
							<!-- 会员满<text class="amount">{{info.activity[activity_index].vip_pay_fee||'0.00'}}</text>奖:<text class="amount">{{info.activity[activity_index].vip_cash_back||'0.00'}}</text>, -->
							<!-- 满<text class="amount" >{{info.activity[activity_index].pay_fee||'0.00'}}</text>奖:<text class="amount">{{info.activity[activity_index].cash_back||'0.00'}}</text> -->
						<!-- </view> -->
					<!-- </view> -->
				</view>
			</view>
			
			<!-- <view class="container customer-server-region ">
				<view class="body">
					<view class="left">
						<image src="@/static/img/wx_qun.jpg" class="wx-qun-icon">

						</image>
						<view class="desc">
							<view class="title">粉丝专属福利群</view>
							<view class="text">入群抽奖全返霸王餐</view>
						</view>
					</view>
					<view class="right">
						<view class="copy-wx-btn">添加</view>
					</view>
				</view> 
				
				<view class="item" v-if="vip.id">
					<image @click="gotoMember" :src="vip.entrance_image" class="image"></image>
					 <view class="bottom">
						<view class="bottom-item flex-y-center" style="display: flex; justify-content: space-between;">
							<image :src="vip.entrance_image" class="image">
					
							</image>
							<view class="central-center">
								<view class=" flex-y-center">
									<view class="text">开通会员预计多省</view>
									<view class="amount">¥10</view>
								</view>
								<view class="flex-y-center">
									<view class="text">每月多省</view>
									<view class="amount">¥300</view>
								</view>
							</view>
							<view class="right" @click="gotoMember">
								<view class="member-botton">立即开通</view>
							</view>
						</view>
					</view> 
				</view>
			</view> -->
			
			
			<view class="container process-region" v-if="info.qrcode">
				<view class="head">
					<view style="margin-left: 10px;">一键识别，直达商家</view>
				</view>
				<view class="body">
					<image mode="widthFix"
						:src="info.qrcode"
						style="max-width:100%;">
					</image>
				</view>
			</view>
			
			<view class="container tips-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">重要提示</view>
				</view>
				<view class="body">
					
					<view class="item" v-for="(item,index) in signup.signup_notice" :key="index">
						<view class="left">
							<image src="@/static/img/xing.png">
							</image>
						</view>
						<view class="right">{{item}}</view>
					</view>
					
				</view>
			</view>
			<!---->
			<view class="container process-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">优惠流程</view>
				</view>
				<view class="body">
					<image v-for="(item,index) in signup.signup_process" :key="index" mode="widthFix"
						:src="item"
						style="max-width:100%;">
					</image>
				</view>
			</view>
			<view class="container special-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">特别说明</view>
				</view>
				<view class="body">
					<image v-for="(item,index) in signup.signup_explain" :key="index" mode="widthFix"
						:src="item"
						style="max-width:100%;">
					</image>
				</view>
			</view>
			<view class="footer-region">
				<view class="buy-btn" @click="baoming()">
					<view class="btn" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">
						<text v-if="!info.activity[activity_index].lastorder">立即报名</text>
						<text v-if="info.activity[activity_index].lastorder">上传凭证</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup1" type="bottom">
			<view class="popup-region">
				<view class="popup-cancel" @click="close()">
					<image src="@/static/img/close-ico.png">

					</image>
				</view>
				<view class="popup-item border-bottom info-item">
					<view class="item-left">
						<view class="region-name" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">{{info.street}}</view>
						<image :src="info.image"
							class="head-img">

						</image>
					</view>
					<view class="item-right">
						<view class="item">
							<view class="title">{{info.name||''}}</view>
						</view>
						<view class="item">
							<view>还剩<text class="stock-text">
									{{info.activity[activity_index].stock||0}}
								</text>份</view>
							<view class="progress">
								<progress class="progress" :percent="info.activity[activity_index].percent" activeColor="rgb(255, 150, 42)" stroke-width="8"
									border-radius="16" backgroundColor="rgba(255, 150, 42, 0.5)">
								</progress>
							</view>
						</view>
						<view class="item">
							<view class="distance-text">{{distance?'距离：'+distance:''}}</view>
							<view class="time-region">可报名 {{info.open_start||''}}-{{info.open_end||''}}</view>
						</view>
					</view>
				</view>
				<view class="popup-item border-bottom cashback-item">
					<!-- <view class="icon discount-text">送</view> -->
				<!-- 	<view class="text">会员满<text class="amount">
							{{info.activity[activity_index].vip_pay_fee||'0.00'}}
						</text>奖:<text class="amount">
							{{info.activity[activity_index].vip_cash_back||'0.00'}}
						</text>
					</view> -->
					<view class="text">满<text class="amount">
							{{info.activity[activity_index].pay_fee||'0.00'}}
						</text>奖:<text class="amount">
							{{info.activity[activity_index].cash_back||'0.00'}}
						</text>
					</view>
					<view>
						<image src="@/static/img/mt-logo-ico.png" class="icon" v-if="platform=='meituan'">
						</image>
						<image src="@/static/img/elm-logo-ico.png" class="icon" v-if="platform=='eleme'">
						</image>
					</view>
				</view>
				<view class="popup-item price-item">
					<text>报名费:</text>
					<text>{{info.activity[activity_index].price||'0.00'}}</text>
				</view>
				<view class="popup-item text-item">
					<text>{{signup.signup_submit_notice||''}}</text>
				</view>
				<view class="popup-item bottom-item">
					<view class="buy-btn" >
						<view @click="applymt('meituan')" class="btn meituan flex-y-center flex-x-center" v-if="platform=='meituan'">
							<!-- <view>确认报名</view>
							<image src="@/static/img/arrowBlack.png" class="btn-elem-image">
							</image> -->
							<view>跳转美团点餐</view>
							<image src="@/static/img/meitu2.png" class="btn-elem-image">
							</image>
						</view>
						<view @click="applymt('eleme')" class="btn elem flex-y-center flex-x-center" v-if="platform=='eleme'">
							<view>点击复制店名</view>
							<image src="@/static/img/arrow.png" class="btn-elem-image">
							</image>
							<view>饿了么搜索店铺</view>
							<image src="@/static/img/elm1.png" class="btn-elem-image">
							</image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 美团报名成功弹窗 -->
		<uni-popup ref="popup2" type="center">
			<view class="popup-region center-popup">
				<view class="popup-cancel" @click="close2()">
					<image src="@/static/img/close-ico.png">
					</image>
				</view>
				<view class="popup-item">
					<text class="popup-title">报名成功！</text>
				</view>
				<view class="popup-item">
					<text class="popup-text">请前往店铺点餐，完成订单后上传订单领返现</text>
				</view>
				<view class="popup-item bottom-item">
					<view class="buy-btn" @click="gotoWaiMai()">
						<view class="btn meituan flex-y-center flex-x-center">
							<view>美团点餐</view>
							<image src="@/static/img/meituan1.png" class="btn-elem-image">
							</image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 饿了么报名成功弹窗 -->
		<uni-popup ref="popup3" type="center">
			<view class="popup-region center-popup">
				<view class="popup-cancel" @click="close2()">
					<image src="@/static/img/close-ico.png">
					</image>
				</view>
				<view class="popup-item">
					<text class="popup-title">报名成功！</text>
				</view>
				<view class="popup-item context-item">
					<view class="chr-item">
						<view class="icon elem">1</view>
						<view>点击复制饿了么店名</view>
					</view>
					<view class="chr-item">
						<view class="icon elem">2</view>
						<view>去饿了么APP进店下单</view>
					</view>
					<view class="chr-item">
						<view class="icon elem footer">3</view>
						<view>订单完成后上传订单领返现</view>
					</view>
				</view>
				
				<view class="popup-item bottom-item">
					<view class="buy-btn">
						<view @click="gotoWaiMai()" class="btn elem flex-x-center flex-y-center">
							<view>复制饿了么店名</view>
							<image src="@/static/img/elm1.png"  class="btn-elem-image">
							</image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {getStoreDetail,signbuy} from '../../apirequest/api.js';
	
	export default {
		data() {
			return {
				id:0,
				info:[],
				activity_index:0,
				signup:[],
				vip:[],
				platform: '',
				distance:'',
				lock:0,
			}
		},
		mounted() {
		    if (window.location.href.indexOf("?#") < 0) {
		      window.location.href = window.location.href.replace("#", "?#");
		    }
		},
		methods: {
			callpay:function(){
				let that = this;
			    if (typeof WeixinJSBridge == "undefined") {
			        if (document.addEventListener) {
			            document.addEventListener('WeixinJSBridgeReady', that.jsApiCall(), false);
			        } else if (document.attachEvent) {
			            document.attachEvent('WeixinJSBridgeReady', that.jsApiCall());
			            document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall());
			        }
			    } else {
			        that.jsApiCall();
			    }
			},
			
			
			
			//点击复制
			copy(name){
				uni.setClipboardData({
					data: name,
					success() {
						uni.showToast({
							title:'复制成功',
							icon:"success"
						});
					}
				});
			},
			
			jsApiCall: function(){
				let that = this;
				let payParam = that.payParam;
				
			    WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			            appId: payParam.appId,
			            nonceStr: payParam.nonceStr,
			            package: payParam.package,
			            signType: payParam.signType,
			            timeStamp: payParam.timeStamp,
			            paySign: payParam.paySign
			        },
			        function (res) {
			            if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								title:'支付成功',
								icon:"success"
							});
							setTimeout(function(){
								 //window.location.reload();
								 let platform = that.data.info.activity[that.activity_index].platform;
								 if (type=='meituan') {
								 	that.$refs.popup2.open()
								 } else {
								 	that.$refs.popup3.open()
								 }
							},1000);
			            } else {
			                WeixinJSBridge.log(res.err_msg);
							uni.showToast({
								title:'支付失败',
								icon:"error"
							});
							that.lock = 0;
			
			            }
			        }
			    );
			},
			//获取数据
			loadData: function () {
			  getStoreDetail({id:this.id}).then((res) => {
			  		if(res.code == 1){
			  			this.info = res.data.info;
						this.signup = res.data.signup;
						this.vip = res.data.vip;
						let platform = res.data.info.activity[this.activity_index].platform;
						if (platform) {
							if (platform == 'eleme') {
								uni.setNavigationBarColor({
									frontColor: "#ffffff", //文字颜色
									backgroundColor: "#00a9e9" //底部背景色
								})
							} 
							if (platform == 'meituan') {
								uni.setNavigationBarColor({
									frontColor: "#ffffff", //文字颜色
									backgroundColor: "#ff8546" //底部背景色
								})
							}
							this.platform = platform;
						}
					} else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:0
							});
						},1000)
					}
			  }).catch(err => {
			  	console.log(err)
			  })
			  
			},	
			changeActivity: function(index) {
				let activity = this.info.activity[index];
				if(!activity){
					uni.showToast({
						title:'活动信息异常',
						icon:"error"
					});
					return;
				}
				if (parseInt(activity.stock) <= 0) {
					uni.showToast({
						title:'今日名额已抢光',
						icon:"error"
					});
					return;
				}
				this.activity_index = index;
				this.platform = activity.platform;
			},
			gotoWaiMai: function() {
				let activity = this.info.activity[this.activity_index];
				if(!activity){
					return;
				}
				if (activity.platform=='meituan') {
					if (this.info.meituan_url) {
							window.location.href = this.info.meituan_url;
					} else {
						uni.showToast({
							title:'暂无链接地址',
							icon:"error"
						});
					}
				} else {//饿了么复制店名
					uni.setClipboardData({
						data:this.info.name,
						success() {
							uni.showToast({
								title:'复制成功',
								icon:"success"
							});
						}
					});					
				}
			},
			gotoMember: function() {
				uni.switchTab({
					url:'/pages/member/member'
				})
			},
			//确认报名
			applymt: function(type) {
				let activity = this.info.activity[this.activity_index];
				if(activity.lastorder){
					/* uni.navigateTo({
						url: '/pages/uploadVoucher/index?id='+activity.lastorder.id
					}) */
					this.close2();
					return;
				}
				if (activity.is_pay==1) {
					if (activity.platform=='meituan') {
						that.$refs.popup2.open()
					} else {
						that.$refs.popup3.open()
					}
					return;
				}
				if (parseInt(activity.stock)<=0) {
					uni.showToast({
						title:'暂无报名名额',
						icon:"error"
					});
					return;
				}
				let that = this;
				if (that.lock==1) {
					return;
				}
				that.lock = 1;
				signbuy({activity_id:activity.id}).then((res) => {
					if(res.code == 1){
						if (res.data.is_pay==1) {
							if (type=='meituan') {
								that.$refs.popup2.open()
							} else {
								that.$refs.popup3.open()
							}
						} else {
							that.payParam = res.data.wx;
							that.callpay();
						}
					}else if(res.code == -1){
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
						setTimeout(function(){
							that.lock = 0;
							uni.navigateTo({
								url:'/pages/changePhone/changePhone'
							});
						},1000);
					}else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						that.lock = 0;
					}
				}).catch(err => {
					console.log(err)
				});
				
			},
			applyelm: function() {
				this.$refs.popup3.open()
			},
			close2: function() {
				this.$refs.popup2.close()
				this.$refs.popup3.close()
			},
			baoming: function() {
				let activity = this.info.activity[this.activity_index];
				if(activity.lastorder){
					uni.navigateTo({
						url: '/pages/uploadVoucher/index?id='+activity.lastorder.id
					})
					return;
				}
				if (parseInt(activity.stock) <= 0) {
					uni.showToast({
						title:'今日名额已抢光',
						icon:"error"
					});
					return;
				}
				this.$refs.popup1.open()
			},
			close: function() {
				this.$refs.popup1.close()
			},
		},
		onLoad: function(options) {
			let id = options.id||0;
			if (!parseInt(id)) {
				uni.showToast({
					title:'参数错误',
					icon:"error"
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:0
					});
				},1000)
				
				return ;
			}
			this.id = id;
			var pages=getCurrentPages(), prevPage=null;
			if(pages.length>1){
				prevPage=pages[pages.length-2];
			   this.distance = prevPage.distance;
			}
		},
		onShow: function() {
			this.loadData();
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f7f8f9;
	}

	.fpmw-store {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center
			/* 公共 */
			/* 头部区域 */
			/* 客服区域 */
			/*  会员优势*/
			/* 活动框 */
			/* 评鉴规则区域 */
			/* 重要提示区域 */
			/* 相册轮播区域 */
			/* 优惠流程区域 */
			/* 特别说明区域 */
			/* 底部区域 */
	}

	.fpmw-store .container {
		width: 710rpx;
		border-radius: 9px;
		background-color: #fff;
		margin-top: 9px
	}

	.fpmw-store .container .head {
		padding: 9px 0
	}

	.fpmw-store .container .head .title {
		width: 78px;
		height: 24px;
		line-height: 24px;
		font-size: 32rpx;
		;
		font-weight: 700;
		text-align: center;
		border-radius: 0 24px 24px 0;
	}

	.fpmw-store .container .body {
		margin: 9px 12px
	}

	.fpmw-store .head-region .body {
		/* 信息项 */
		/* 返现项 */
		/* 地址项 */
		/* 底部项 */
	}

	.fpmw-store .head-region .body .head-item {
		display: flex;
		padding: 4px 0
	}

	.fpmw-store .head-region .body .info-item {
		padding-top: 0
	}

	.fpmw-store .head-region .body .info-item .item-left {
		position: relative
	}

	.fpmw-store .head-region .body .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 42px;
		height: 15px;
		text-align: center
	}

	.fpmw-store .head-region .body .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.fpmw-store .head-region .body .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.fpmw-store .head-region .body .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.fpmw-store .head-region .body .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		;
		font-weight: 700
	}

	.fpmw-store .head-region .body .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		;
		margin: 0 7px
	}

	.fpmw-store .head-region .body .info-item .item-right .item .progress {
		width: 125px
	}

	.fpmw-store .head-region .body .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.fpmw-store .head-region .body .info-item .item-right .item .time-region {
		width: 125px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.fpmw-store .head-region .body .cashback-item {
		justify-content: space-between;
		align-items: center
	}

	.fpmw-store .head-region .body .cashback-item .icon {
		width: 19px;
		height: 19px
	}

	.fpmw-store .head-region .body .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		line-height: 19px;
		font-size: 12px
	}

	.fpmw-store .head-region .body .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.fpmw-store .head-region .body .address-item .icon {
		width: 19px;
		height: 19px
	}

	.fpmw-store .head-region .body .address-item .address-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 7px
	}

	.fpmw-store .head-region .body .footer-item {
		padding-bottom: 0;
		color: #f96456;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.fpmw-store .customer-server-region .item {
		margin: 9px 12px;
		position: relative
	}

	.fpmw-store .customer-server-region .item .image {
		width: 100%;
		height: 40px
	}

	.fpmw-store .customer-server-region .item .bottom {
		position: absolute;
		top: 0;
		left: 0;
		right: 0
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item {
		height: 40px;
		margin: 0px 8px
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item .image {
		height: 24px;
		width: 95px
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item .central-center {
		font-size: 24rpx
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item .text {
		color: #fff
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item .amount {
		color: #ff8546
	}

	.fpmw-store .customer-server-region .item .bottom .bottom-item .member-botton {
		background-color: #ff8546;
		color: #773f11;
		width: 61px;
		height: 24px;
		font-weight: 700;
		text-align: center;
		line-height: 24px;
		border-radius: 11px;
		font-size: 24rpx
	}

	.fpmw-store .customer-server-region .body {
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.fpmw-store .customer-server-region .body .left {
		display: flex;
		align-items: center
	}

	.fpmw-store .customer-server-region .body .left .wx-qun-icon {
		width: 28px;
		height: 28px
	}

	.fpmw-store .customer-server-region .body .left .desc {
		display: flex;
		flex-flow: column;
		margin-left: 9px
	}

	.fpmw-store .customer-server-region .body .left .desc .title {
		color: #333;
		font-size: 12px;
		font-weight: 700
	}

	.fpmw-store .customer-server-region .body .left .desc .text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-top: 4px
	}

	.fpmw-store .customer-server-region .body .right .copy-wx-btn {
		border-radius: 9px;
		background-color: #fff;
		color: #8eca26;
		border: 1px solid #8eca26;
		text-align: center;
		font-size: 9px;
		padding: 4px 14px
	}

	.fpmw-store .activity-container .activity-list {
		width: 321px;
		height: 41px;
		border-radius: 20px 20px 0px 0px;
		display: flex;
		align-items: center;
		border-bottom: 0px !important
	}

	.fpmw-store .activity-container .activity-list .item {
		flex: 1;
		height: 100%;
		border-radius: 20px 20px 0px 0px;
		font-size: 34rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.fpmw-store .activity-container .meituan {
		border: 1px solid #fdd42b;
		background: #f6f2d9
	}

	.fpmw-store .activity-container .meituan .item {
		background: #f6f2d9;
		color: #804812
	}

	.fpmw-store .activity-container .meituan .active {
		background: #ff8546;
		color: #fff;
	}

	.fpmw-store .activity-container .elem {
		border: 1px solid #00a9e9;
		background: #e6f0f6
	}

	.fpmw-store .activity-container .elem .item {
		background: #e6f0f6;
		color: #01a9ee
	}

	.fpmw-store .activity-container .elem .active {
		color: #fff;
		background: linear-gradient(270deg, #00d4f6, #00a9e9)
	}

	.fpmw-store .rules-region {
		margin-top: 0px
	}

	.fpmw-store .rules-region .body {
		display: flex;
		flex-flow: column
	}

	.fpmw-store .rules-region .body .item {
		margin-bottom: 9px;
		display: flex;
		color: #333;
		font-weight: 700;
		font-size: 28rpx;
	}

	.fpmw-store .rules-region .body .item .left {
		width: 19px;
		height: 19px;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		text-align: center;
		line-height: 19px
	}

	.fpmw-store .rules-region .body .item .right {
		flex: 1;
		margin-left: 7px
	}

	.fpmw-store .rules-region .body .item .right .amount {
		margin: 0
	}

	.fpmw-store .tips-region {
		position: relative
	}

	.fpmw-store .tips-region .back-img {
		position: absolute;
		width: 100%;
		height: 100%
	}

	.fpmw-store .tips-region .back-img image {
		width: 100%;
		height: 100%
	}

	.fpmw-store .tips-region .head {
		position: relative
	}

	.fpmw-store .tips-region .body {
		position: relative;
		display: flex;
		flex-flow: column;
		color: #333;
		font-size: 28rpx;
	}

	.fpmw-store .tips-region .body .item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 9px
	}

	.fpmw-store .tips-region .body .item .left image {
		width: 15px;
		height: 15px;
		display: block
	}

	.fpmw-store .tips-region .body .item .right {
		margin-left: 7px
	}

	.fpmw-store .banner-region .banner-image {
		width: 100%;
		height: 100%;
		margin: unset;
		display: block;
		border-radius: 9px
	}

	.fpmw-store .special-region {
		margin-bottom: 96px
	}

	.fpmw-store .footer-region {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		display: flex;
		height: 72px;
		justify-content: center
	}

	.fpmw-store .footer-region .buy-btn .btn {
		width: 309px;
		height: 43px;
		line-height: 43px;
		font-size: 19px;
		border-radius: 43px;
		color: #fff;
		text-align: center;
		-webkit-animation-name: scaleDraw;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 2s;
		/*动画所花费的时间*/
		/* 	background: linear-gradient(to right, #ffae31, #fe771d);
		color: #fff !important; */
	}

	.meituan {
		color: #333 !important;
		background-color: #ff8546;
	}

	@-webkit-keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			-webkit-transform: scale(1);
			transform: scale(1)
				/*开始为原始大小*/
		}

		25% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
				/*放大1.1倍*/
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		75% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
		}
	}

	@keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			-webkit-transform: scale(1);
			transform: scale(1)
				/*开始为原始大小*/
		}

		25% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
				/*放大1.1倍*/
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		75% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
		}
	}

	.popup-region {
		background-color: #fff;
		border-radius: 19px 19px 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		padding-top: 9px
			/* 取消按钮 */
			/* 信息项 */
			/* 返现项 */
			/* 价格项 */
			/* 底部项 */
	}

	.popup-region .popup-item {
		display: flex;
		width: 331px;
		padding: 9px
	}

	.popup-region .popup-cancel {
		position: absolute;
		top: 9px;
		right: 9px
	}

	.popup-region .popup-cancel image {
		width: 23px;
		height: 23px
	}

	.popup-region .info-item .item-left {
		position: relative
	}

	.popup-region .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 42px;
		height: 15px;
		text-align: center
	}

	.popup-region .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.popup-region .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.popup-region .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.popup-region .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		;
		font-weight: 700
	}

	.popup-region .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		;
		margin: 0 7px
	}

	.popup-region .info-item .item-right .item .progress {
		width: 125px
	}

	.popup-region .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.popup-region .info-item .item-right .item .time-region {
		width: 125px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.popup-region .cashback-item {
		justify-content: space-between;
		align-items: center
	}

	.popup-region .cashback-item .icon {
		width: 19px;
		height: 19px
	}

	.popup-region .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		line-height: 19px;
		font-size: 12px
	}

	.popup-region .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.popup-region .price-item {
		font-size: 30rpx;
	}

	.popup-region .price-item text:nth-child(1) {
		color: #333
	}

	.popup-region .price-item text:nth-child(2) {
		color: #f96456;
		margin-left: 7px
	}

	.popup-region .text-item {
		font-size: 30rpx;
		;
		color: #999
	}

	.popup-region .bottom-item {
		width: 340px;
		height: 72px;
		padding: 0
	}

	.popup-region .bottom-item .buy-btn {
		width: 100%
	}

	.popup-region .bottom-item .buy-btn .btn {
		width: 100%;
		height: 43px;
		line-height: 43px;
		font-size: 19px;
		border-radius: 43px;
		color: #fff;
		text-align: center
	}

	.btn-elem-image {
		width: 17px;
		height: 17px;
		margin: 0px 4px;
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px;
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9;
	}

	/* 中间弹窗 */
	.center-popup {
		border-radius: 21px
			/* 正文 */
			/* 美团红包 */
			/* 饿了么红包 */
	}

	.center-popup .popup-item {
		width: 274px;
		justify-content: center;
		padding: 10px 24px
	}

	.center-popup .popup-item .popup-title {
		color: #333;
		font-size: 21px;
		font-weight: 700
	}

	.center-popup .popup-item .popup-text {
		color: #bec1c7;
		text-align: center
	}

	.center-popup .context-item {
		background-color: #f4f5f7;
		display: flex;
		flex-flow: column;
		padding: 21px 21px 0 21px;
		margin: 10px;
		border-radius: 10px
	}

	.center-popup .meituan-hb-item .btn {
		width: 100%;
		height: 49px;
		line-height: 49px;
		font-size: 21px;
		border-radius: 49px;
		color: #fff;
		text-align: center
	}

	.center-popup .elem-hb-item .btn {
		width: 100%;
		height: 49px;
		line-height: 49px;
		font-size: 21px;
		border-radius: 49px;
		color: #fff;
		text-align: center
	}

	.center-popup .chr-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-bottom: 21px
	}

	.center-popup .chr-item .icon {
		margin-right: 8px;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		line-height: 16px;
		text-align: center;
		position: relative
	}

	.center-popup .chr-item .icon::after {
		content: " ";
		position: absolute;
		background-color: #b19f9f;
		top: 17px;
		left: 7px;
		width: 2px;
		height: 21px
	}

	.center-popup .chr-item .footer::after {
		content: "";
		width: 0;
		height: 0
	}
	.copy{
		width: 50rpx; height: 50rpx;
	}
</style>
